<script setup>
import { onMounted, ref } from 'vue'
import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
    onShareAppMessage,
} from '@dcloudio/uni-app'
import { http } from '@/utils/http.js'
import Tabbar from '@/components/TabbarCustom.vue'
import { useUsercodeStore } from '@/store/usercode.js'

const userCodeStore = useUsercodeStore()
//tab
const activeIndex = ref(2)
const txList = ref([])
const wxList = ref([])
const treasureList = ref([])
const currentPage = ref(1)
function chooseTab(name, title) {
    txList.value = []
    wxList.value = []
    treasureList.value = []
    currentPage.value = 1
    console.log(name, title)
    activeIndex.value = name

    if (
        // userCodeStore.usercode.isTrans == 1 &&
        userCodeStore.usercode.token
    ) {
        getdrawList()
    }
}
async function getdrawList() {
    const res = await http.request({
        url: '/api/box/boxList',
        method: 'POST',
        data: {
            page: currentPage.value,
            limit: 10,
            type: 4,
            scene: 0,
            keywords: '',
        },
    })
    
    treasureList.value = [...treasureList.value, ...res.data]
    if (res.address_status == 1) {
        uni.utils.toast('背包商品即将自动发货，请填写地址。')
        setTimeout(() => {
            uni.navigateTo({
                url: `/minePage/editaddress/index`,
            })
        }, 2000)
    }
}
//图片数量
const imgnum = ref(4)

// 轮播图
const info = ref()
const modeIndex = ref(1)
const styleIndex = ref(1)
const dotsStyles = ref({
    backgroundColor: '#fff',
    border: 'none',
    color: '#fff',
    selectedBackgroundColor: '#000',
    selectedBorder: 'none',
    width: '3',
    height: '3',
})
const swiperDotIndex = ref(0)
const current = ref(0)
const mode = ref('dot')
async function getBanner() {
    const res = await http.request({
        url: '/api/config/getBanner',
        method: 'POST',
        data: {
            type: 2,
        },
    })
    console.log(res)
    info.value = res.data
}
function change(e) {
    current.value = e.detail.current
}
function clickItem(e) {
    swiperDotIndex.value = e
}
function onBanner(index) {
    console.log(22222, index)
}

//跳转天选
function goTX(id) {
    uni.navigateTo({
        url: `/drawPage/txDraw/index?id=${id}`,
    })
}
//跳转无限
function goWX(id) {
    uni.navigateTo({
        url: `/drawPage/wxDraw/index?id=${id}`,
    })
}
//跳转寻宝
function goTreasure(id) {
    uni.navigateTo({
        url: `/drawPage/treasureDraw/index?id=${id}`,
    })
}

function goTop() {
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
    })
}

onShareAppMessage(() => {
    return {
        title: '惊喜好物等你来选',
        path: 'pages/draw/index',
    }
})

onMounted(() => {
    // getdrawList()
})
onLoad(() => {
    txList.value = []
    wxList.value = []
    treasureList.value = []
    currentPage.value = 1
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    getdrawList()
    // }
    getBanner()
})
// 上拉加载
function refresh() {
    currentPage.value++
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    getdrawList()
    // }
}
// 上拉加载
onReachBottom(() => {
    currentPage.value++
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    getdrawList()
    // }
})
// 下拉刷新
onPullDownRefresh(() => {
    currentPage.value = 1
    txList.value = []
    wxList.value = []
    treasureList.value = []
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    getdrawList()
    // }
    uni.stopPullDownRefresh() // 停止刷新
    uni.utils.toast('刷新成功')
})
</script>

<template>
    <view class="draw">
        <view class="content-wrap">
            <view class="" style="margin-bottom: 30rpx" v-for="item in treasureList" :key="item.id">
                <image :src="item.img" style="
								height: 324rpx;
								width: 100%;
								box-sizing: border-box;
								border-radius: 16rpx;
							" @click="goTreasure(item.id)" mode=""></image>
                <view class="" style="
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 28rpx;
							">
                    <view class="">{{ `${item.name}(￥${item.price})` }}
                    </view>
                    <view class="">
                        余量{{
                            Math.floor(
                                Number(item.leftover) /
                                Number(item.extract_ci)*100
                        )
                        }}%
                    </view>
                </view>
            </view>
        </view>


        <view class="scroll-top" @click="goTop">
            <image src="https://ojqn.wm2177.com/wechat_imgs/scroll-top.png" style="width: 60rpx; height: 60rpx" mode="">
            </image>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.draw {
    // height: 100vh;
    // padding-top: 192rpx;
    overflow: hidden;
    background: linear-gradient(to bottom, #d7d2fd -3%, transparent 22%);
    box-sizing: border-box;

    .uni-swiper-dot-box {
        width: 100%;
    }

    ::v-deep .uni-swiper__dots-item {
        margin-bottom: 30rpx !important;
    }

    .swiper-box {
        height: 424rpx;
    }

    .swiper-item {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 424rpx;
        color: #fff;
    }
}

.scroll-top {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    bottom: 227rpx;
    right: 30rpx;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
}

/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
.y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: auto;
}

/* #endif */

.content-wrap {
    height: auto;
    padding: 30rpx 20rpx 0rpx 20rpx;
    // overflow-y: auto;
    // overflow-x: hidden;
    box-sizing: border-box;

    .tx-item {
        position: relative;
        height: 424rpx;
        margin-bottom: 30rpx;
        padding: 24rpx 28rpx 0 24rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/txbg.png') no-repeat;
        background-size: 100%;
        box-sizing: border-box;

        .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: start;
        }

        .image-group {
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;

            .img-left {
                height: 290rpx;
                border-radius: 24rpx;
                margin-right: 22rpx;
                background-color: #fff;
                overflow: hidden;
                flex-shrink: 0;
            }

            .img-right {
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;

                .img-item {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 12rpx;
                    background-color: #fff;
                    overflow: hidden;
                }
            }
        }

        .corner {
            position: absolute;
            left: 0;
            bottom: 4rpx;
            width: 183rpx;
            height: 68rpx;
            border-radius: 0rpx 24rpx 0rpx 18rpx;
            background-color: #fd40a2;
            color: #fff;
            line-height: 68rpx;
            text-align: center;
        }

        &:last-child {
            margin-bottom: 300rpx;
        }
    }

    .wx-item {
        display: flex;
        align-items: center;
        height: 256rpx;
        // margin-bottom: 26rpx;
        padding: 24rpx 0;
        border-bottom: 2rpx solid #fafafa;

        // background-color: pink;
        .wx-left {
            margin-right: 22rpx;
            border-radius: 6rpx;
            overflow: hidden;
        }

        .wx-right {
            height: 100%;
            width: 62%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .reward-list {
                width: 100%;
                height: 128rpx;
                padding: 12rpx 0 0 4rpx;
                border-radius: 4rpx;
                background-color: #f9fafc;
                box-sizing: border-box;

                .scroll-list {
                    width: 430rpx;
                    overflow: hidden;

                    // width: calc(72rpx * var(--imgnum));
                    .scroll {
                        height: 84rpx;
                        display: flex;
                        // width: calc(72rpx * var(--imgnum));
                        animation: scroll 20s linear infinite;

                        .scroll-item {
                            width: 72rpx;
                            height: 72rpx;
                            // margin: 3rpx;
                            border-radius: 6rpx;
                            flex-shrink: 0;
                            overflow: hidden;
                            box-sizing: border-box;
                        }
                    }
                }
            }
        }

        &:last-child {
            margin-bottom: 300rpx;
        }
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-426rpx));
        /* 单个图片宽度 * 图片数量的一半 */
    }
}

::v-deep .y-tabs {
    padding-top: 30rpx;
    top: -30rpx;
    border-radius: 36rpx;
    background-color: #fff;
}

::v-deep .y-tabs__content {
    height: auto;
    // overflow: auto !important;
}

::v-deep .y-tab__pane {
    // overflow: auto;
    height: auto !important;
}

::v-deep .y-tabs__wrap {
    background-color: transparent !important;
}

::v-deep .y-tabs__scroll {
    width: 560rpx !important;
    height: 64rpx;
    left: 13%;
}

::v-deep .y-tab {
    height: 64rpx !important;
    margin: 0 20rpx;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    z-index: 9 !important;
}

::v-deep .y-tabs__nav {
    border-radius: 32rpx;
    background-color: #f2eeff;
}

::v-deep .y-tabs__nav .is-active {
    border-radius: 32rpx !important;
    margin: 0 !important;
    padding: 0 34rpx !important;
    background-color: $all-color !important;
    color: #fff !important;
}

::v-deep .y-tab__text {
    font-size: 28rpx;
}

::v-deep .y-tabs__bar {
    display: none !important;
    // width: 50% !important;
    // height: 100% !important;
    // transform: translate3d(0,0,0) !important;
    // border-radius: 32rpx !important;
    // bottom: 0 !important;
    // background-color: #7863ff !important;
}
</style>
